<template>
  <div @click="handleClick" class="time-popover-wrapper" :class="{'justify-center': columnConfig.align === 'center'}">
    <span >
      {{ row[column] }}
    </span> 
    <el-date-picker
      v-if="isEdit"
      v-model="value" 
      type="datetime"
      value-format="YYYY-MM-DD HH:mm:ss"
      format="YYYY-MM-DD HH:mm:ss"
      placeholder="选择日期时间"
      @change="handleEmit"
      ref="datePickerRef"
      style="width: 100%;"
    />
  </div>
</template>

<script>

export default {
  props: {
    row: {
      type: Object,
      default: ()=> {
        return {}
      }
    },
    column: {
      type: String,
      default: ''
    },
    columnConfig: {
      type: Object,
      default: ()=> {
        return {}
      }
    },
    eventBus: {
      type: Object,
      default: null,
    },
  },
  watch: {
    row: {
      immediate: true,
      deep: true,
      handler(newVal) {
        this.value = newVal[this.column]
      },
    },
  },
  data() {
    return {
      isEdit: false,
      value: '',
    }
  },
  mounted() {
    // 监听关闭事件
    if (this.eventBus) {
      this.eventBus.$on('close-popovers', this.handleClose);
    }
  },
  
  beforeDestroy() {
    // 组件销毁前移除监听
    if (this.eventBus) {
      this.eventBus.$off('close-popovers', this.handleClose);
    }
  },
  methods: {
    handleEmit(data) {
      this.row[this.column] = data;
      this.$emit('change', this.row, this.column, data)
    },
    handleClose() {
      const picker = this.$refs.datePickerRef;
      if (picker.pickerVisible !== undefined) {
        picker.pickerVisible = false;
      }
      this.isEdit = false;
    },
    handleClick () {
      this.isEdit = true;
      this.$nextTick (()=>{
        this.$refs.datePickerRef.focus();
      })
    },
  },
};
</script>

<style lang="scss" scoped>
.time-popover-wrapper {
  min-height: 36px;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

.justify-center {
  justify-content: center;
}

.time-popover-wrapper ::v-deep .el-date-editor {
  position: absolute;
  width: 100%;
  opacity: 0;
}

.time-popover-wrapper ::v-deep .el-input__wrapper {
  width: 100%;
  box-shadow: none;
  background-color: transparent;
  padding: 0;
}

.time-popover-wrapper ::v-deep  .el-input__inner {
  cursor: pointer;
  color: #000819;
}

.time-popover-wrapper ::v-deep .el-input__prefix {
  display: none;
}

.time-popover-wrapper ::v-deep .el-input__suffix {
  display: none;
}
</style>
